<template>
  <main class="main-content mt-0">
    <div
      class="page-header min-vh-50 pb-11 m-3"
      style="
        position: relative;
        overflow: hidden;
        display: flex;
        background-size: cover;
        background-image: url('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/argon-dashboard-pro/assets/img/signup-cover.jpg');
        background-position: top;
        border-radius: 0.5rem;
        align-items: flex-start;
        padding: 3rem 0 0;
        margin: 1rem;
      "
    >
      <span class="mask bg-gradient-dark opacity-6"></span>
      <div class="welcome-box" style="margin: auto">
        <div style="width: 100%; text-align: center">
          <h1
            style="
              position: absolute;
              font-weight: bold;
              color: #f0f0f0;
              text-align: center;
            "
          >
            Welcome!
          </h1>
        </div>
      </div>
      <!--      <div class="container" style="width: 100%">-->
      <!--        <div style="width: 100%; justify-content: center;">-->
      <!--          <div style="width: 100%; text-align: center;">-->
      <!--            <h1 style="position: absolute;font-weight:bold;color: #f0f0f0; text-align: center">Welcome!</h1>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
    <div class="login-box" style="margin: auto">
      <div class="row mt-lg-n10 mt-md-n11 mt-n10 justify-content-center">
        <div class="col-xl-4 col-lg-5 col-md-7 mx-auto">
          <div style="margin: auto">
            <md-card>
              <md-card-content>
                <div class="card-header text-center pt-4">
                  <h3 style="font-weight: bold">登 录</h3>
                </div>

                <!--              <div class="card-body">-->
                <el-form :rules="rules" ref="ruleForm" role="form">
                  <md-field>
                    <label>用户名</label>
                    <md-input v-model="ruleForm.name" type="text"></md-input>
                  </md-field>
                  <md-field>
                    <label>邮箱</label>
                    <md-input v-model="ruleForm.email" prop="email" type="email"></md-input>
                  </md-field>
                  <md-field>
                    <label>密码</label>
                    <md-input v-model="ruleForm.pwd" prop="pass" type="password"></md-input>
                  </md-field>
                  <!--                  <argon-input type="email" placeholder="Email" aria-label="Email" />-->
                  <!--                  <argon-input type="password" placeholder="Password" aria-label="Password" />-->
                  <argon-checkbox checked>
                    <label class="form-check-label" for="flexCheckDefault">
                      我同意
                      <a
                        href="javascript:;"
                        class="text-dark font-weight-bolder"
                        >相关规定与协议</a
                      >
                    </label>
                  </argon-checkbox>
                  <div style="align-content: center">
                    <md-button
                      style="width: 100%"
                      class="md-raised md-success"
                      @click="login"
                      >登录</md-button
                    >
                  </div>
                  <p class="text-sm mt-3 mb-0">
                    还没有账号？
                    <a
                      href="javascript:;"
                      @click="signup"
                      class="text-dark font-weight-bolder"
                      >注册</a
                    >
                  </p>
                </el-form>
                <!--              </div>-->
              </md-card-content>
            </md-card>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import ArgonCheckbox from "@/components/ArgonCheckbox";
const body = document.getElementsByTagName("body")[0];

export default {
  name: "Login",
  components: {
    ArgonCheckbox,
  },
  data() {
    return {
      ruleForm: {
        name: "",
        email: "",
        pwd: "",
      },
      error: {
        name: "",
        pwd: "",
      },
      rules: {
        account: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur"},
        ],
      }
    };
  },
  methods: {
    login() {
      this.$router.push({
        name: "Dashboard",
        params: {
          username: this.name,
        },
      });
      var that = this;
      this.$axios
        .post("http://vtingfu.nat300.top/admin/login", {
          username: this.ruleForm.name,
          password: this.ruleForm.pwd,
        })
        .then((response)=> {
          console.log(that.response);
          that.response = response.data;
          if(that.response.data.success) {
            alert(that.response.msg);
            this.$router.push({
              name: "Dashboard",
              params: {
                username: this.name,
              },
            });
          } else {
            alert(that.response.data.msg);
            data.name = "";
            data.email = "";
            data.pwd = "";
          }
          that.$emit("listencurrent", [that.response]);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    signup() {
      const { name, pwd, $router } = this;
      this.$router.push({
        name: "Signup",
        params: {
          username: this.name,
        },
      });
    },
    created() {
      // this.$store.state.hideConfigButton = true;
      // this.$store.state.showNavbar = false;
      // this.$store.state.showSidenav = false;
      // this.$store.state.showFooter = false;
      body.classList.remove("bg-gray-100");
    },
    beforeUnmount() {
      // this.$store.state.hideConfigButton = false;
      // this.$store.state.showNavbar = true;
      // this.$store.state.showSidenav = true;
      // this.$store.state.showFooter = true;
      body.classList.add("bg-gray-100");
    },
  },
};
</script>

<style>
.login-box {
  position: absolute;
  width: 400px;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
}

.welcome-box {
  position: absolute;
  width: 230px;
  left: 50%;
  top: 15%;
  transform: translate(-50%, -50%);
}

.bg-gradient-dark {
  background-image: linear-gradient(195deg, #1a2035, #1a2035);
}

.mask {
  position: absolute;
  background-size: cover;
  background-position: center center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}
</style>
